<template>
  <div class="form-box">
    <van-form :colon="formConfig.colon" :label-align="formConfig.labelAlign" :input-align="formConfig.inputAlign" :label-width="formConfig.labelWidth" @submit="onSubmit">
      <van-cell-group v-for="(groupsItem, groupsIndex) of groups" :key="groupsItem.keyId">
        <div v-for="(listItem, listIndex) of groupsItem.list" :key="listIndex" class="form-line">
          <template v-if="listItem.inputType === 1">
            <!-- 日期组件 -->
            <template v-if="listItem.colType === 'date'">
              <van-cell :value="listItem.value" :title="listItem.label" @click="listItem.show = true" />
              <van-calendar v-model="listItem.show" :type="listItem.dateType" @confirm="onConfirmDate(...arguments, listItem)" />
            </template>
            <!-- 多行文本输入框 -->
            <van-field v-else-if="listItem.colType === 'text'" v-model="listItem.value" :maxlength="listItem.maxlength" :show-word-limit="listItem.showWordLimit" :label="listItem.label" :placeholder="listItem.label" type="textarea" />
            <!-- 单行文本输入框 -->
            <van-field v-else v-model="listItem.value" :label="listItem.label" :placeholder="listItem.label" />
          </template>

          <!-- 2.下拉框 -->
          <template v-if="listItem.inputType === 2">
            <van-field :value="listItem.value" :label="listItem.label" readonly clickable placeholder="选择城市" @click="listItem.show = true" />
            <van-popup v-model="listItem.show" round position="bottom">
              <van-picker :columns="listItem.dropList" :show-toolbar="listItem.isShowToolbar" :title="listItem.toolbarTitle" :toolbar-position="listItem.toolbarPosition" :default-index="listItem.defaultIndex" @cancel="listItem.show = false" @confirm="onConfirm">
                <van-icon slot="right-icon" name="search" class="custom-icon" />
              </van-picker>
            </van-popup>
          </template>
        </div>
      </van-cell-group>
      <!-- <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div> -->
    </van-form>
  </div>
</template>
<script>
export default {
  props: {
    formConfig: {
      type: Object,
      default () {
        return {}
      }
    },
    editSource: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {

    }
  },
  computed: {
    groups () {
      const arr = this.editSource.groups
      // debugger
      console.log('arr', arr)
      return arr
    }
  },
  watch: {
    editSource: {
      handler(obj) {

      },
      deep: true
    }
  },
  methods: {
    onSubmit () {
      console.log(arguments)
    },
    onConfirm () {
      console.log(arguments)
    },
    onConfirmDate () {
      console.log(arguments)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.form-box{
  .form-line{
    border-bottom:1px solid $borderColor;
  }
}
</style>
